// components/Domain/DomainCard.tsx
import React from 'react';
import { Play, Pause, Square, Power, HardDrive, Cpu, Database } from 'lucide-react';
import Badge from '../Common/Badge';

export interface Domain {
  id: string;
  name: string;
  state: 'running' | 'paused' | 'shutoff' | 'crashed' | 'unknown';
  cpu: number;
  memory: number;
  disk: number;
  os: string;
  lastUpdated: string;
}

export interface DomainCardProps {
  domain: Domain;
  onStart: (id: string) => void;
  onPause: (id: string) => void;
  onStop: (id: string) => void;
  onRestart: (id: string) => void;
  onViewDetails: (id: string) => void;
}

const DomainCard: React.FC<DomainCardProps> = ({
  domain,
  onStart,
  onPause,
  onStop,
  onRestart,
  onViewDetails
}) => {
  const getStateColor = (state: string) => {
    switch (state) {
      case 'running': return 'success';
      case 'paused': return 'warning';
      case 'shutoff': return 'default';
      case 'crashed': return 'error';
      default: return 'info';
    }
  };

  const formatMemory = (bytes: number) => {
    const gb = bytes / (1024 * 1024 * 1024);
    return `${gb.toFixed(1)} GB`;
  };

  const formatDisk = (bytes: number) => {
    const gb = bytes / (1024 * 1024 * 1024);
    return `${gb.toFixed(1)} GB`;
  };

  return (
    <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6 hover:shadow-md transition-shadow">
      <div className="flex items-start justify-between mb-4">
        <div>
          <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-1">
            {domain.name}
          </h3>
          <Badge variant={getStateColor(domain.state)}>
            {domain.state.toUpperCase()}
          </Badge>
        </div>
        <div className="flex items-center gap-1">
          {domain.state === 'running' && (
            <>
              <button
                onClick={() => onPause(domain.id)}
                className="p-2 text-yellow-600 hover:bg-yellow-50 dark:hover:bg-yellow-900/20 rounded-lg transition-colors"
                title="Pause"
              >
                <Pause size={16} />
              </button>
              <button
                onClick={() => onRestart(domain.id)}
                className="p-2 text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors"
                title="Restart"
              >
                <Power size={16} />
              </button>
              <button
                onClick={() => onStop(domain.id)}
                className="p-2 text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors"
                title="Stop"
              >
                <Square size={16} />
              </button>
            </>
          )}
          {domain.state === 'paused' && (
            <>
              <button
                onClick={() => onStart(domain.id)}
                className="p-2 text-green-600 hover:bg-green-50 dark:hover:bg-green-900/20 rounded-lg transition-colors"
                title="Resume"
              >
                <Play size={16} />
              </button>
              <button
                onClick={() => onStop(domain.id)}
                className="p-2 text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors"
                title="Stop"
              >
                <Square size={16} />
              </button>
            </>
          )}
          {domain.state === 'shutoff' && (
            <button
              onClick={() => onStart(domain.id)}
              className="p-2 text-green-600 hover:bg-green-50 dark:hover:bg-green-900/20 rounded-lg transition-colors"
              title="Start"
            >
              <Play size={16} />
            </button>
          )}
        </div>
      </div>

      <div className="space-y-3 mb-4">
        <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
          <Cpu size={14} />
          <span>{domain.cpu} vCPU</span>
        </div>
        <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
          <Database size={14} />
          <span>{formatMemory(domain.memory)}</span>
        </div>
        <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
          <HardDrive size={14} />
          <span>{formatDisk(domain.disk)}</span>
        </div>
      </div>

      <div className="flex items-center justify-between text-xs text-gray-500 dark:text-gray-500">
        <span>{domain.os}</span>
        <span>{new Date(domain.lastUpdated).toLocaleString()}</span>
      </div>

      <button
        onClick={() => onViewDetails(domain.id)}
        className="w-full mt-4 px-4 py-2 text-sm bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 rounded-lg transition-colors"
      >
        View Details
      </button>
    </div>
  );
};

export default DomainCard;